import React from "react";
import style from "./style.module.css";

export interface ListItem {
  title: string;
  desc: string;
  url: string;
  id: string;
  price: number;
  children?: JSX.Element;
  onClick?: () => void
}

const Index: React.FC<ListItem> = ({
  id,
  desc,
  url,
  price,
  title,
  children,
  onClick
}) => {
  return (
    <dl key={id} className={style["dl"]} onClick={ onClick }>
      <dt>
        <img src={url} alt="" />
      </dt>
      <dd>
        <h3>{title}</h3>
        <p>{desc}</p>
        <div>
          <b>单价：￥{price}</b>
          { children }
        </div>
      </dd>
    </dl>
  );
};

export default Index;
